﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>靖远县刘川镇文化站内</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/countUp.js"></script>
    <script src="js/CXJSBridge.js"></script>

</head>
<body>
<div class="header xycenterbox">
    <!--<img src="img/logo.png" alt=""/>-->
    <p>歌德电子书借阅机</p>
</div>
<div class="main">
    <div class="main-top">
        <p>热门图书推荐</p>
        <div class="bookInfo xycenterbox">
            <img src="img/dushi.jpg" alt=""/>
            <img src="img/dushi_code.png" alt=""/>
            <div>
                <p><span>书名&nbsp;:&nbsp;</span><span class="">赌石</span></p>
                <p><span>作者&nbsp;:&nbsp;</span><span class="word1">臧小凡</span></p>
                <p><span>所属分类&nbsp;:&nbsp;</span><span class="word1">都市</span></p>
            </div>
        </div>
        <div class="bookInfo xycenterbox">
            <img src="img/lishi.jpg" alt=""/>
            <img src="img/lishi_code.png" alt=""/>
            <div>
                <p><span>书名&nbsp;:&nbsp;</span><span class="">历史的问号</span></p>
                <p><span>作者&nbsp;:&nbsp;</span><span class="word1">丁奇</span></p>
                <p><span>所属分类&nbsp;:&nbsp;</span><span class="word1">历史</span></p>
            </div>
        </div>
    </div>
    <div class="main-bottom">
        <div class="bot-title">图书下载量</div>
        <div class="bot-num xycenterbox">
            <div>昨日下载量</div>
            <div class="num-bg">
                <div class="yesterday-bar num-bar"><div class="yesterday-num num">111次</div></div>
            </div>
        </div>
        <div class="bot-num xycenterbox">
            <div>累计下载量</div>
            <div class="num-bg">
                <div class="total-bar num-bar"><div class="total-num num">12996次</div></div>
            </div>
        </div>
        <div class="bot-circle">
            <a href="javascript:void(0)" onclick='processQuit();'><span>点击开启阅读之旅</span></a>
            <div class="circle">
                <img src="img/22.png" alt="" class="kp_qn"/>
            </div>
            <div class="circle">
                <img src="img/33.png" alt="" class="kp_qw"/>
            </div>
            <div class="circle">
                <img src="img/11.png" alt="" class="kp_qn"/>
            </div>
        </div>
    </div>
</div>

</body>

<script>
    $(function(){
        num_move();
    });
    var library_timer=null,op2={suffix:'次'};
    function num_move(){
        clearTimeout(library_timer);
        $('.yesterday-bar').stop().css({width:0});
        $('.total-bar').stop().css({width:0});
        $('.yesterday-bar').animate({width:(111/180)*100+"%"},2000,"linear");
        $('.total-bar').animate({width:(12996/15000)*100+"%"},2000,"linear");
        var d1 = new CountUp($(".yesterday-num"), 0, 111, 0, 2, op2);
        var d2 = new CountUp($(".total-num"), 0, 12996, 0, 2, op2);
        d1.start();
        d2.start();
        library_timer=setTimeout(num_move,8000);
    }
    function processQuit()
    {
        jsBridge.postNotification('CLIENT_EXIT_WEBAPP',{message:''});
    };


</script>
</html>